<template>
  <div class="tag-group">
    <ul>
        <li>
        <div class="pm">
        <div class="pm-top">
        <p>215</p>
        <div>
        <p>良</p>
        <p>PM2.5</p>
        </div>
        </div>
        <p>夜间多云<span>26℃</span></p>
        <p><span>温度</span><span>10%</span><span>东南风</span><span>3-4级</span></p>
        </div>
        </li>
        <li>
        <h2>多云</h2>
        </li>
        <li>
        <h2>下雨</h2>
        </li>
        <li>
        <h2>下雪</h2>
        </li>
        <li>
            <h2>刮风</h2>
        </li>
    </ul>
  
</div>


</template>

<script>
export default {
    
  }
</script>

<style lang="less" scoped>
    .tag-group{
        margin-bottom: 20px;
    }
    ul{
        display: flex;
        justify-content: space-between;
        li{
        width: 212px;
        height: 108px;
        border-radius: 10px;
        line-height: 108px;
        h2{
            margin-left: 120px;
            font-size: 20px;
            color: #425276;
        }
    }
    li:nth-child(1){
        background:url(../img/shujufenxi_09.png) no-repeat;
        background-position:30px 20px ;
        background-color:#409eff ;
        display: flex;
        align-items: center;
        justify-content: right;
        line-height: normal;
    }
    li:nth-child(2){
        background:url(../img/shujufenxi_03.png) no-repeat;
        background-position:30px 20px ;
        background-color: #fff;
    }
    li:nth-child(3){
        background:url(../img/shujufenxi_18.png) no-repeat;
        background-position:30px 20px ;
            background-color: #fff;
    }
    li:nth-child(4){
        background:url(../img/shujufenxi_15.png) no-repeat;
        background-position:30px 20px ;
            background-color: #fff;
    }
    li:nth-child(5){
        background:url(../img/shujufenxi_06.png) no-repeat;
        background-position:30px 20px ;
            background-color: #fff;
    }
    }
    .pm{
        color: #ffffff;
        float: right;
        text-align: center;
        margin-right: 5px;
        > p:nth-child(2){
            font-size: 14px;
             margin-bottom: 8px;
             span{
                margin-left: 3px;
             }
        }
        > p:last-child{
            font-size: 14px;
             span{
                margin-right: 3px;
             }
        }
    }
    .pm-top{
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        > p{
            font-size: 22px;
            color: #fff;
            margin-right:5px;
            
        }
        > div{
            p:first-child{
                font-size: 8px;
               margin-bottom: 5px;
            }
            p:last-child{
                font-size: 14px;
               
            }
        }
    }
</style>